<template>
  <div class="ww">
    <div class="registration-container">
        <h1>登录</h1>
        <div id="registrationForm">
            <div class="input-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="输入用户名" required v-model="input1">
            </div>
              <!-- <div class="input-group">
                <label for="username">邮箱</label>
                <input type="text" id="Email" placeholder="输入邮箱" required v-model="input2">
            </div> -->
            <div class="input-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="输入密码" required v-model="input2">
            </div>
             <div class="input-group">
                <label for="confirm-password">请输入验证码</label>
                <input type="text" placeholder="输入验证码" class="q9" v-model="input3"> 
                <span class="q10">{{ sui }}</span>
                <button class="q11" @click="yanz()">获取验证码</button>
            </div>
            <!-- <input type="checkbox" class="q6" @click="ji()"> <span class="q7">记住密码</span> -->
            <a href="http://localhost:8080/#/zhu" class="q8">点击注册账号</a>
            <button type="submit" @click="dl()">登录</button>   
        </div>
        <div id="message"></div>
        <div class="footer">
        </div>
    </div>
  </div>
</template>

<script>
import {deng,yan} from '@/utlis/https'

export default {
  data() {
    return {
        input1:"",
        input2:"",
        input3:"",
        
        sui:''
    }
  },
  mounted() {
  },
  methods: {
    dl(){
        // console.log(this.input1,this.input2,this.input3);
        localStorage.setItem('user',this.input1)
        localStorage.setItem('pwd',this.input2)

        deng({
            vercode:this.input3,
            name:this.input1,
            pwd:this.input2,
        })
        .then(val =>{
            console.log(val);
            if(this.input3 != '' && this.input3 != this.sui){
                alert('验证码不正确')
            }else{
                this.$router.push('/shou')
            }
        })
        .catch((e) =>{
            console.log(e);
        })

    },

    yanz(){
          yan()
    .then((val) =>{
        console.log(val.msg)
        this.sui = val.msg
    })
    .catch((e) =>{
        console.log(e);
    })
    }
  },
  computed: {

  },
}
</script>
<style lang='less' scoped>
.ww {  
    position: fixed;
    left: 450px;
    top: 100px;
    // justify-content: center;  
    align-items: center;    
    background-size: cover;   
    color: #333; 
    width: 600px;
    height: 400px;
}  

.registration-container {  
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #8B4513; 
    padding: 40px;  
    border-radius: 15px;  
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);  
    max-width: 450px;  
    width: 100%;  
    text-align: center; 
    background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.X-HiatdbjIN9pjQFvh48TwHaEK?w=268&h=180&c=7&r=0&o=7&dpr=1.4&pid=1.7&rm=3');
}  

h1 {  
    margin-bottom: 10px;  
    color: #8B4513;  
    font-size: 28px;  
}  

.subtitle {  
    margin-bottom: 20px;  
    color: #5B3A29;
    font-size: 14px;  
}  

.input-group {  
    margin-bottom: 20px;  
    text-align: left;   
}  

label {  
    display: block;  
    margin-bottom: 5px;  
    font-weight: bold;  
    color: #333;  
}  

input {  
    width: 100%;  
    padding: 12px;  
    border: 1px solid #ccc;  
    border-radius: 5px;  
    transition: border-color 0.3s;  
    font-size: 14px;   
    box-sizing: border-box; 
}  

input:focus {  
    border-color: #8B4513;  
    outline: none;  
}  

button {  
    width: 100%;  
    padding: 12px;  
    background-color: #8B4513; 
    color: white;  
    border: none;  
    border-radius: 5px;  
    font-weight: bold;  
    cursor: pointer;  
    transition: background-color 0.3s;  
    font-size: 16px;   
}  

button:hover {  
    background-color: #6F3C2A; 
}  

#message {  
    text-align: center;  
    margin-top: 15px;  
    color: red;  
}  

.footer {  
    text-align: center;  
    margin-top: 20px;  
}  

.footer a {  
    color: #8B4513; 
    text-decoration: none;  
}  

.footer a:hover {  
    text-decoration: underline;  
}
.q6{
    position: relative;
    right: 200px;
}
.q7{
    position: relative;
    bottom: 25px;
    right: 100px;
}
.q8{
    color: antiquewhite;
    border-bottom: none;
    position: relative;
    bottom: 5px;
    left: 90px;
}
.q9{
    width: 180px;
}
.q10{
    position: relative;
    left: 60px;
}
.q11{
    width: 120px;
    height: 40px;
    position: relative;
    left: 80px;
    line-height: 20px;
}
</style>